<template>
  <div ref="container" class="g6el"/>
</template>

<script>
import G6 from '@antv/g6'
import { bondlineService } from '@/api/upms/bondline'

export default {
  name: 'Index',
  data: function() {
    return {
      graph: undefined,
      data: {
        nodes: [
          {
            id: 'node1', // 节点的唯一标识
            x: 100, // 节点横坐标
            y: 200, // 节点纵坐标
            label: '认证服务' // 节点文本
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
            label: '应用a'
          }
        ],
        // 边集
        edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: 'node1', // 起始点 id
            target: 'node2', // 目标点 id
            label: '远程调用',
            style: {
              endArrow: true
            }
            // 边的文本
          }
        ]

      }
    }
  },
  created() {
  },
  mounted() {
    this.container = this.$refs.container
    this.graph = new G6.Graph({
      container: this.container, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 800, // Number，必须，图的宽度
      height: 500 // Number，必须，图的高度
    })
    var _this = this
    bondlineService.list().then(function(res) {
      _this.graph.data(res.data) // 读取 Step 2 中的数据源到图上
      _this.graph.render() // 渲染图
    })
  }
}
</script>

<style scoped>

</style>
